import ProTable, {ActionType} from '@ant-design/pro-table';
import { PageContainer } from '@ant-design/pro-layout';
import {Button, message, Popconfirm} from "antd";
import {delSeckill, spikeGoods} from '@/services/ant-design-pro/marketing'
import {PlusOutlined} from "@ant-design/icons";
import {useRef, useState} from "react";
import AnchorAdd from "./components/AnchorAdd";


const Goods = () => {
  const actionRef = useRef<ActionType>()
  const [isModalAnchor,setIsModalAnchor] = useState(false)  // 添加及修改主播的 modal

  const columns = [
    {
      dataIndex: 'product_id',
      width: 100,
      title: 'ID',
      align: 'center',
    },
    {
      title: '名称',
      dataIndex: 'title',
      align: 'center',
    },
    {
      title: '电话',
      dataIndex: 'phone',
      align: 'center',
    },
    {
      title: '微信号',
      dataIndex: 'price',
      align: 'center',
    },
    {
      title: '操作',
      valueType: 'option',
      width: 200,
      fixed: 'right',
      align: 'center',
      render: (_,record) => [
        <a onClick={()=>{}}> 编辑 </a>,
        <Popconfirm
          title="确定要删除发布的优惠券吗？"
          onConfirm={()=>{
            delSeckill(record.id).then(()=>{
              message.success('删除成功');
              actionRef.current.reload();
            })
          }}
          onCancel={()=>{
            message.success('已取消');
          }}
          okText="确定"
          cancelText="取消"
        >
          <a href="#">删除</a>
        </Popconfirm>
      ],
    },
  ];


  return (
    <PageContainer
      header={{
        breadcrumb: {},
      }}
    >

      <ProTable
        actionRef={actionRef}
        columns={columns}
        request={async (params={}) => {

          let {data,meta} =  await spikeGoods({...params})
          return{
            data,
            success:true,
            total:meta.pagination.total
          }
        }}
        editable={{
          type: 'multiple',
        }}
        rowKey="id"
        search={false}
        form={{
          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
          syncToUrl: (values, type) => {
            if (type === 'get') {
              return {
                ...values,
                created_at: [values.startTime, values.endTime],
              };
            }
            return values;
          },
        }}
        pagination={{
          pageSize: 5,
        }}
        dateFormatter="string"
        toolBarRender={() => [
          <Button
            type="primary"
            onClick={() => {
              setIsModalAnchor(true)
            }}
            icon={<PlusOutlined />}
          >
            添加主播
          </Button>
        ]}
      />
      {/* 添加修改主播 modal */}
      <AnchorAdd
        isModalAnchor={isModalAnchor}
        modalOk={isModalAnchor}
        modalCancel={()=>{
          setIsModalAnchor(false)
        }}
      />
    </PageContainer>
  );
};

export default Goods;
